<template>
	<view>
	
		<view class="content" style="padding-top:10vw;">
			<my-turntable-draw
			  ref="raffleWheel" 
			  :width="boxData.width"
			  :height="boxData.height"
			  :prizeList="prizeList"
			  :targetIndex="targetIndex"
			  @befoterClick="befoterClick"
			  @afterClick="afterClick"
			>
			</my-turntable-draw>
		</view>
		<view class="num_box">抽奖次数：{{qd}}</view>
		
		<view class="receive_box">
			<view class="receive">
				<view class="nav">
					<view class="menu">
						转盘记录
					</view>
				</view>
		
				<view class="receive_auto" v-if="order.length>0">
					<block v-for="(item, index) in order" :key="index">
						<view class="receive_list">
							<view class="man_box">
								<!-- <view class="portrait"><image :src="item.img" mode="scaleToFill"></image></view> -->
								<view class="name">{{ item.name }}</view>
							</view>
							<view class="money_box" v-if="item.type==10">
								<view class="money">
									<view class="n">{{ item.money }}</view>
									
								</view>
								<view class="time">{{ item.time }}</view>
							</view>
							<view class="money_box" v-else>
								<view class="money">
									<view class="n">请联系客服</view>
									
								</view>
								<view class="time">{{ item.time }}</view>
							<!-- 	<view class="menu_box">
									<view class="menu" v-if='item.dj==0' :data-url="'/pages/goods/goods?id=' + item.goods_id" @click.stop="gotopage">去下单</view>
									<view class="menu02" v-else>已下单</view>
								</view> -->
							</view>
						</view>
					</block>
					
				
					
				</view>
				<view class="loadMore" v-else style="color: #333;text-align: center;margin-top: 50px;">
					~暂无数据~
				</view>
			</view>
		</view>
		


		
	</view>
</template>

<script>
	import myTurntableDraw from '@/components/my-turntable-draw/my-turntable-draw'
export default {
	components: {
	  myTurntableDraw
	},
	data() {
		return {
			over:true,
			qd:0,
			user:[],
			rule:[],
			order:[],
			boxData: {
			  width: 240,
			  height: 240
			},
			prizeList: [],
			// 中奖下标
			targetIndex: 0,
			// 需多次获取
			indexNum: 10,
			info: [
				{
					img: '../../../static/tx01.png',
					name: '139****1234',
					money: '100',
					time: '2020.11.16'
				},
				{
					img: '../../../static/tx01.png',
					name: '139****1234',
					money: '100',
					time: '2020.11.16'
				},
				{
					img: '../../../static/tx01.png',
					name: '139****1234',
					money: '100',
					time: '2020.11.16'
				}		
			],
			receive: [
				{
					img: '../../../static/tx01.png',
					name: '139****1234',
					money: '100',
					receive: false
				},
				{
					img: '../../../static/tx01.png',
					name: '139****1234',
					money: '100',
					receive: true
				},
				{
					img: '../../../static/tx01.png',
					name: '139****1234',
					money: '100',
					receive: false
				}			
			],
			
		};
	},
	onLoad() {
		// this.loadData();
		 this.turntableOrder();
		let me = this;
		me.Net._get('zplist', null, res => {
			me.prizeList = res.data;
		});
		
		// this.prizeList = [
		//   { name: '一等奖', count: 10, image: '../../../static/bg12.png' },
		//   { name: '谢谢惠顾', count: 99, image: '' },
		//   { name: '二等奖', count: 10, image: '../../../static/bg12.png' },
		//   { name: '再来一次', count: 99, image: '' },
		//   { name: '谢谢惠顾', count: 99, image: '' },
		//   { name: '三等奖', count: 10, image: '../../../static/bg12.png' },
		// 	]
		  
		
		// turnTableList:[
		// 	'一等奖',
		// 	'谢谢惠顾',
		// 	'二等奖',
		// 	'再来一次',
		// 	'谢谢惠顾',
		// 	'三等奖',
		// ],
	},
	
		
	methods: {
		loadData() {
			let me = this;
			me.Net._get('turntableRule', null, res => {
				me.rule = res.data.integral_rule;
			});
			
		},
		turntableOrder() {
			let me = this;
			me.Net._get('turntableOrder', null, res => {
				me.order = res.data;
			});
			me.Net._get('qdlist', null, res => {
				me.qd = res.data;
			});
		},
		befoterClick(data) {
			let me = this;
		  if(data.type == 'start') {
		    console.log('开始抽奖')
			me.Net._get('turntable', null, res => {
				var level = res.data;
				for(var i=0;i<me.prizeList.length;i++)
				{
					if(me.prizeList[i].id==level)
					{
						 me.targetIndex =i
						 break
					} 
				}
				
				// if(level==1){
				// 		 me.targetIndex = 0
				// }else if(level==2){
				// 	me.targetIndex = 2
				// }else if(level==3){
				// 		me.targetIndex = 5
				// }else if(level==4){
				// 		me.targetIndex = 3
				// }else{
				// 	var Arr = [1,4];
				// 	var n = Math.floor(Math.random() * Arr.length + 1)-1;
				// 	me.targetIndex = parseInt(Arr[n]);
				// }
				
				//console.log(me.targetIndex)
				data.callback && data.callback(me.targetIndex)
					
				
			});		
		
		   
		    
		    // this.$refs.raffleWheel.rotoreAction(_n)
		  }
		},
		afterClick(data) {
		  if(data.type == 'end') {
		    //console.log(data.content.count)
			this.turntableOrder();
		    data.callback && data.callback()
		    
		  }
		},
		// routingBefore(){
		// 	console.log('抽奖开始！')			
		// 	var me = this;
		// 	if (!me.over){
		// 		return
		// 	}
		// 	me.over = false
		// 	me.Net._get('userInfo', null, res => {
		// 		me.user = res.data;
		// 		var integral = res.data.integral;
		// 		if(integral< me.rule.expend){
		// 			uni.showToast({
		// 				title:'积分不足'+me.rule.expend,
		// 				icon:"none"
		// 			})
		// 			return
		// 		}	
			
		// 		me.Net._get('turntable', null, res => {
		// 			var level = res.data.turn_res.level;
					
		// 			if(level==1){
		// 				me.winIndex = 0
		// 			}else if(level==2){
		// 				me.winIndex = 2
		// 			}else if(level==3){
		// 				me.winIndex = 5
		// 			}else{
		// 				var Arr = [1,3,4];
		// 				var n = Math.floor(Math.random() * Arr.length + 1)-1;
		// 				me.winIndex = parseInt(Arr[n]);
		// 			}
					
		// 			console.log(me.winIndex)
		// 			me.$refs.wheelDraw.routing() //开始转动	
						
					
		// 		});		
						
		// 	});				
		// },

		backPage() {
			uni.navigateBack({});
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
	$wheelBgUrl: '~static/raffle-wheel/raffle-wheel__bg';
	page{
		background: #FC4710;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}
	
	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
	
	.receive_box {
		width: 92%;
		margin: 0 auto;
		margin-top: 10vw;
		border-radius: 3vw;
		/* background-image: -moz-linear-gradient(90deg, rgb(255, 225, 162) 0%, rgb(255, 236, 191) 52%, rgb(255, 246, 219) 100%);
		background-image: -webkit-linear-gradient(90deg, rgb(255, 225, 162) 0%, rgb(255, 236, 191) 52%, rgb(255, 246, 219) 100%);
		background-image: -ms-linear-gradient(90deg, rgb(255, 225, 162) 0%, rgb(255, 236, 191) 52%, rgb(255, 246, 219) 100%); */
		padding: 1vw;
		background-color: #fff;
	}
	
	.receive_box .receive {
		border: 2rpx solid #e8e8e8;
		border-radius: 2vw;
		padding: 0 3vw 4vw;
	}
	
	.receive_box .receive .nav {
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
	
	.receive_box .receive .nav .menu {
		width: 50%;
		height: 13.5vw;
		line-height: 13.5vw;
		text-align: center;
		font-size: 4vw;
		font-weight: bold;
		position: relative;
		color: #333;
	}
	
	.receive_box .receive .nav .menu .line {
		width: 22%;
		height: 3px;
		border-radius: 3px;
		position: absolute;
		bottom: 2vw;
		left: calc(50% - 11%);
	}
	
	.menucolor01 {
		color: #d93a3c !important;
	}
	
	.menucolor02 {
		background-image: -moz-linear-gradient(90deg, rgb(217, 57, 59) 1%, rgb(229, 85, 87) 99%);
		background-image: -webkit-linear-gradient(90deg, rgb(217, 57, 59) 1%, rgb(229, 85, 87) 99%);
		background-image: -ms-linear-gradient(90deg, rgb(217, 57, 59) 1%, rgb(229, 85, 87) 99%);
	}
	
	.receive_box .receive .receive_auto {
		width: 100%;
		height: 80vw;
		overflow: hidden;
		overflow-y: auto;
	}
	
	.receive_box .receive .receive_auto .receive_list {
		width: 100%;
		height: 12vw;
		display: flex;
	}
	
	.receive_box .receive .receive_auto .receive_list .man_box {
		width: 50%;
		display: flex;
	}
	
	.receive_box .receive .receive_auto .receive_list .man_box .portrait {
		width: 9vw;
		height: 9vw;
		border-radius: 50%;
		margin-top: 1.5vw;
		margin-right: 3vw;
	}
	
	.receive_box .receive .receive_auto .receive_list .man_box .portrait image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.receive_box .receive .receive_auto .receive_list .man_box .name {
		font-size: 4vw;
		color: #5a5a5a;
		line-height: 12vw;
		font-weight: bold;
	}
	
	.receive_box .receive .receive_auto .receive_list .money_box {
		flex: 1;
	}
	
	.receive_box .receive .receive_auto .receive_list .money_box .money {
		width: 100%;
		font-size: 3.5vw;
		color: #333;
		display: flex;
		justify-content: flex-end;
		line-height: 6vw;
	}
	
	.receive_box .receive .receive_auto .receive_list .money_box .money .n {
		color: #f4310f;
		font-size: 5vw;
		font-weight: bold;
	}
	
	.receive_box .receive .receive_auto .receive_list .money_box .time {
		font-size: 2.5vw;
		color: #666;
		margin-top: 0vw;
		text-align: right;
	}
	
	.receive_box .receive .receive_auto .receive_list .money_box .menu_box{
		display: flex;
		justify-content: flex-end;
	}
	
	.receive_box .receive .receive_auto .receive_list .money_box .menu {
		height: 7vw;
		line-height: 7vw;
		border-radius: 7vw;
		font-size: 3.5vw;
		color: #fff;
		padding: 0 2vw;
		background-color: #d9393b;
		margin-top: 2.5vw;
	}
	
	.receive_box .receive .receive_auto .receive_list .money_box .menu02 {
		height: 7vw;
		line-height: 7vw;
		border-radius: 7vw;
		font-size: 3.5vw;
		color: #fff;
		padding: 0 2vw;
				background-color: rgb(181, 181, 181);
	
		margin-top: 2.5vw;
	}
	
	.num_box{
		width: 100%;
		font-size: 3.8vw;
		font-weight: bold;
		text-align: center;
		margin-top: 8vw;
		color: #fff;
	}
	
	
	

</style>
